<template>
  <el-drawer
    v-model="visible"
    append-to-body
    :title="title || '无标题'"
    modal-class="oneNetDrawer"
    @close="() => emits('visibleChange', false)"
  >
    <div class="drawerContent">
      <div class="item">
        <span>数据名称：</span>
        <span>{{ defaultInfo?.serverName ?? "" }}</span>
      </div>
      <div class="item voiceInstruction">
        <div class="voiceInstructionTitle">常见语音指令：</div>
        <dragList :data="voiceArr" ref="dragListRef"></dragList>
      </div>
      <div class="buttons">
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确认 </el-button>
          <el-button
            @click="
              () => {
                visible = false;
                emits('visibleChange', false);
              }
            "
          >
            取消
          </el-button>
        </el-form-item>
      </div>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { updateServer } from "../../../api/manage";
import dragList from "../dragList/index.vue";
import { transformCommonSentence } from "../utils";

const props = defineProps({
  show: Boolean,
  title: String,
  defaultInfo: Object,
});
const emits = defineEmits(["visibleChange", "submitSuccess"]);
const visible = ref(props.show);
const voiceArr = ref([]);
const dragListRef = ref(null);

const init = () => {};
defineExpose({ init });

const onSubmit = async () => {
  // 实时数据保存在子组件里面
  const r = dragListRef.value.voiceArr;
  const sentence = r.reduce((res, item, i) => {
    const cur = `${i + 1}、${item.value || ""}${
      i === r.length - 1 ? "" : "\n"
    }`;
    return res + cur;
  }, "");

  // mlgb
  // get请求获取数据的时候没有s，post请求修改数据的时候有s
  const params = {
    ...props.defaultInfo,
    sentence,
    // sentences: sentence,
    userType: props.defaultInfo.userTypes,
    // userTypes: props.defaultInfo.userTypes,
  };
  delete params.sentences;
  delete params.userTypes;

  const res = await updateServer(params);
  if (res.success === true) {
    visible.value = false;
    emits("visibleChange", false);
    emits("submitSuccess");
    ElMessage.success("请求成功");
  } else {
    ElMessage.error("请求失败,接口返回:" + res.msg);
  }
};

watch(
  () => props.defaultInfo,
  (newVal) => {
    voiceArr.value = transformCommonSentence(newVal.sentences || "");
  },
  { deep: true }
);

watch(
  () => props.show,
  (newVale) => {
    visible.value = newVale;
  }
);
</script>

<style lang="scss">
body {
  .oneNetDrawer {
    position: fixed;
    .el-drawer {
      width: 963px !important;
    }
  }
}
</style>

<style scoped lang="scss">
.drawerContent {
  position: relative;
  width: 100%;
  height: 100%;
  .item {
    & + .item {
      margin-top: 20px;
    }
  }
  .voiceInstruction {
    display: flex;
    .voiceInstructionTitle {
      line-height: 32px;
    }
  }
  .buttons {
    position: absolute;
    bottom: -20px;
    right: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    :deep(.el-button) {
      width: 100px;
      height: 35px;
    }
  }
}
</style>
